<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><span style="font-size: 14px;"
                        >智提升</span
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item>同步></el-breadcrumb-item>
                <el-breadcrumb-item>练习</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span style="font-size: 14px;">开始练习</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span style="font-size: 14px;">智学报告</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="title">智学报告</div>
        <div class="bodyBox">
            <div class="bodyBox-top">
                <div class="bodyBox-top-left">
                    <div class="left-one">
                        {{ title }}
                    </div>
                    <div class="left-two">
                        {{ section_name }}
                    </div>
                    <div class="left-three">
                        完成时间：{{ practice_obj.close_time }}
                    </div>
                </div>
                <div class="bodyBox-top-center">
                    <div class="center-one">
                        正确率
                    </div>
                    <div class="center-two">{{ practice_obj.rate }}%</div>
                    <el-progress
                        :percentage="practice_obj.rate"
                        :show-text="false"
                        color="#5FB878"
                    ></el-progress>
                </div>
                <div class="bodyBox-top-right">
                    <div class="right-box">
                        <div class="right-text">
                            总题数
                        </div>
                        <div class="one-bottom">
                            {{ practice_obj.question_num }}
                        </div>
                    </div>
                    <div
                        style="height: 32px;border: 1px solid #DADFE6;position: relative;bottom: 12px;"
                    ></div>
                    <div class="right-box">
                        <div class="right-text">
                            对的题数
                        </div>
                        <div class="two-bottom">
                            {{ practice_obj.correct_num }}
                        </div>
                    </div>
                    <div
                        style="height: 32px;border: 1px solid #DADFE6;position: relative;bottom: 12px;"
                    ></div>
                    <div class="right-box">
                        <div class="right-text">
                            错的题数
                        </div>
                        <div class="three-bottom">
                            {{ practice_obj.error_num }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="bodyBox-bottom">
                <div class="bottom-left">
                    <div class="bottom-left-title">
                        错题原因
                    </div>
                    <template v-if="practice_obj.rate !== 100">
                        <div
                            class="reason-item"
                            v-for="(item,
                            index) in practice_obj.practice_error_log"
                            :key="index"
                        >
                            <div class="reason-item-title">
                                {{ item.error_name }}({{ item.error_num }}题)
                            </div>

                            <div
                                v-html="item.project"
                                style=" padding-top: 16px;"
                            ></div>
                        </div>
                    </template>
                    <template v-else>
                        <tips :tipsText="'暂无错题'"></tips>
                    </template>
                    <div class="bottom-left-bottom">
                        <div class="button" @click="backPage">
                            返回目录
                        </div>
                        <div class="statement">
                            智助教育提供技术支持
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPracticePresentation } from "@/api/testQuestions/intellectualReport";
import { latex_reques } from "@/utils/latex";
import { getFormatTime } from "@/utils/timeUtils";
import tips from "@/components/tips/index";
export default {
    components: {
        tips
    },
    props: {},
    data() {
        return {
            title: this.$route.query.title,
            section_name: this.$route.query.section_name,
            practice_id: this.$route.query.practice_id, // 记录ID
            practice_obj: {} // 报告列表
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.getErrReason();
    },
    methods: {
        getErrReason() {
            getPracticePresentation({
                practice_id: this.practice_id
            }).then(res => {
                console.log("res", res);
                // 解析标签
                latex_reques(res.data.practice_error_log, "project");
                this.practice_obj = res.data;
                // 格式化时间戳
                this.practice_obj.close_time = getFormatTime(
                    this.practice_obj.close_time
                );
                // 格式化正确率
                this.practice_obj.rate = parseInt(this.practice_obj.rate);
                console.log("报告列表", this.practice_obj);
            });
        },
        backPage() {
            this.$router.push({
                path: "/synchronization/practice/index"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.bodyBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    .bodyBox-top {
        display: flex;
        width: 100%;
    }
    .bodyBox-bottom {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 24px;
    }
}
.bodyBox-top {
    .bodyBox-top-left {
        flex: 1;
        width: 378px;
        height: 164px;
        background: #ffffff;
        border-radius: 8px;
        padding: 32px 24px;
        box-sizing: border-box;
    }
    .bodyBox-top-center {
        flex: 1;
        width: 378px;
        height: 164px;
        background: #ffffff;
        border-radius: 8px;
        margin-left: 25px;
        padding: 32px 24px;
        box-sizing: border-box;
    }
    .bodyBox-top-right {
        flex: 1;
        width: 378px;
        height: 164px;
        background: #ffffff;
        border-radius: 8px;
        margin-left: 25px;
        padding: 32px 24px;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
    }
}
.bodyBox-top-left {
    .left-one {
        font-size: 20px;
        color: #2d3440;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .left-two {
        font-size: 16px;
        margin: 18px 0px;
        color: #2d3440;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .left-three {
        color: #9ea4b0;
    }
}
.bodyBox-top-center {
    .center-one {
        color: #6d7785;
    }
    .center-two {
        font-size: 30px;
        color: #6d7785;
        margin-top: 10px;
        margin-bottom: 30px;
        font-weight: 550;
    }
}
.bodyBox-top-right {
    .right-box {
        flex: 1;
        text-align: center;
    }
}
.right-box {
    .right-text {
        color: #6d7785;
    }
    .one-bottom {
        font-size: 52px;
        color: #6d7785;
        margin-top: 11px;
    }
    .two-bottom {
        font-size: 52px;
        color: #18db60;
        margin-top: 11px;
    }
    .three-bottom {
        font-size: 52px;
        color: #f25427;
        margin-top: 11px;
    }
}
.bodyBox-bottom {
    .bottom-left {
        flex: 2;
        padding: 24px 32px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 8px;
    }
}
.bottom-left {
    .bottom-left-title {
        font-size: 22px;
        color: #2d3440;
        font-weight: bold;
    }
    .reason-item {
        margin-top: 32px;
    }
    .bottom-left-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 63px;
    }
}
.reason-item {
    .reason-item-title {
        height: 38px;
        padding: 8px 32px;
        box-sizing: border-box;
        color: #2d3440;
        border-radius: 8px;
        border: 1px solid #18db60;
    }
    .reason-item-number {
        display: flex;
        margin-top: 16px;
    }
}
.reason-item-number {
    div {
        height: 38px;
        width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #9ea4b0;
        margin-left: 24px;
        &:first-child {
            margin-left: 0px;
        }
    }
}
.bottom-left-bottom {
    .button {
        width: 440px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: #018854;
        border-radius: 20px;
    }
    .statement {
        color: #9ea4b0;
        font-size: 12px;
        margin-top: 12px;
    }
}
</style>
